<script setup>
import {inject, watch} from "vue";
import {
    useNode
} from '@vue-flow/core'

const {
    node
} = useNode()

const props = defineProps(['id', 'data'])
const updateNodesData = inject("updateNodesData")
// 监听props.data的变化
watch(() => props.data, (newValue, oldValue) => {
    console.log('props.data changed ', newValue);
    updateNodesData();
}, {
    deep: true
})
</script>

<template>
    <div class="_container">
        <!-- header section -->
        <div class="fx fx-c_center pad-16 header">
            <div class="fx fx-center wh-40 logo">
                <jb-icon :local="true" icon="mynaui:user-waves-solid" width="30" color="#2263c5"></jb-icon>
            </div>
            <div class="ml-10 tc-dark">
                <div>App应用设置</div>
                <p class="font-12 tc-assist">设置应用的相关配置</p>
            </div>
        </div>

        <!-- form section -->
        <div class="form fx-col pad-16">
            <div class="mb-3">
                <div class="flex flex-row items-center ">
                    <jb-icon :local="true" icon="fluent-color:clipboard-text-edit-32" width="25" ></jb-icon>
                    <span class="ml-3 font-16">欢迎语</span>
                </div>

                <n-input @mousedown.stop @wheel.stop  v-model:value="props.data.uiConfig.welcomeTip"
                         class="mt-2" type="textarea" placeholder="请输入欢迎语.例如:轻松开始，享受便捷服务,有任何问题？我们随时为您服务。"
                         :autosize="{minRows: 3, maxRows: 6,}" maxlength="300"></n-input>
            </div>
            <div class="n-form-item">
                <jb-icon :local="true" icon="fluent-color:heart-16" width="25" color="#2263c5"></jb-icon>
                <span>应用Logo</span>
                <jb-avatar v-model:src="props.data.uiConfig.appLogo"
                           accept="image/jpg,image/png,image/gif,image/bmp,image/jpeg"
                           save-path="logo/{date(yyMMdd)}/{random(6)}/{ori}" :upload="true">
                </jb-avatar>
            </div>

            <div class="n-form-item">
                <jb-icon :local="true" icon="fluent-color:options-16" width="25" color="#2263c5"></jb-icon>
                <span>头像展示</span>
                <n-switch v-model:value="props.data.uiConfig.showAvatar" :round="false" size="large">
                    <template #checked>展示</template>
                    <template #unchecked>隐藏</template>
                </n-switch>
            </div>
            <div v-if="props.data.uiConfig.showAvatar">
                <div class="n-form-item">
                    <jb-icon :local="true" icon="fluent-color:person-heart-32" width="25" color="#2263c5"></jb-icon>
                    <span>用户头像</span>
                    <jb-avatar v-model:src="props.data.uiConfig.userAvatar"
                               accept="image/jpg,image/png,image/gif,image/bmp,image/jpeg"
                               save-path="logo/{date(yyMMdd)}/{random(6)}/{ori}" :upload="true">
                    </jb-avatar>
                </div>
                <div class="n-form-item">
                    <jb-icon :local="true" icon="fluent-color:bot-sparkle-20" width="25" color="#2263c5"></jb-icon>
                    <span>AI&nbsp;&nbsp;头像</span>
                    <jb-avatar v-model:src="props.data.uiConfig.assistantAvatar"
                               accept="image/jpg,image/png,image/gif,image/bmp,image/jpeg"
                               save-path="logo/{date(yyMMdd)}/{random(6)}/{ori}" :upload="true">
                    </jb-avatar>
                </div>
            </div>

            <!--      <n-form ref="formRef" label-placement="left"-->
            <!--              label-width="100" require-mark-placement="right-hanging">-->
            <!--        <n-form-item label="应用logo" path="appLogo" class="mb-16">-->
            <!--          <div class="output-flag noshrink"></div>-->
            <!--          <jb-avatar v-model:src="props.data.uiConfig.appLogo"-->
            <!--                     accept="image/jpg,image/png,image/gif,image/bmp,image/jpeg"-->
            <!--                     save-path="logo/{date(yyMMdd)}/{random(6)}/{ori}" :upload="true">-->
            <!--          </jb-avatar>-->
            <!--        </n-form-item>-->

            <!--        <n-form-item label="头像展示" class="mb-16">-->
            <!--          <n-switch v-model:value="props.data.uiConfig.showAvatar" :round="false" size="large">-->
            <!--            <template #checked>展示</template>-->
            <!--            <template #unchecked>隐藏</template>-->
            <!--          </n-switch>-->
            <!--        </n-form-item>-->

            <!--        <div v-if="props.data.uiConfig.showAvatar">-->
            <!--          <n-form-item label="用户头像" path="userAvatar" class="mb-16">-->
            <!--            <jb-avatar v-model:src="props.data.uiConfig.userAvatar"-->
            <!--                       accept="image/jpg,image/png,image/gif,image/bmp,image/jpeg"-->
            <!--                       save-path="logo/{date(yyMMdd)}/{random(6)}/{ori}" :upload="true">-->
            <!--            </jb-avatar>-->
            <!--          </n-form-item>-->

            <!--          <n-form-item label="AI头像" path="assistantAvatar" class="mb-16">-->
            <!--            <jb-avatar v-model:src="props.data.uiConfig.assistantAvatar"-->
            <!--                       accept="image/jpg,image/png,image/gif,image/bmp,image/jpeg"-->
            <!--                       save-path="logo/{date(yyMMdd)}/{random(6)}/{ori}" :upload="true">-->
            <!--            </jb-avatar>-->
            <!--          </n-form-item>-->
            <!--        </div>-->
            <!--      </n-form>-->
        </div>
    </div>
</template>

<style scoped>
._container {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-sizing: border-box;
    width: 260px;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
}

.header {
    border-bottom: 1px solid rgb(229, 231, 235);
}

.logo {
    background: #dce6fc;
    border-radius: 12px;
}

.n-form-item {
    display: flex;
    align-items: center;
    margin-bottom: 16px; /* 增加表单项间的间距 */
}

/* 改进开关组件的样式 */
.n-switch {
    font-size: 14px;
    line-height: 20px;
}

.mb-16 {
    margin-bottom: 16px;
}

.n-form-item span ,.welcome{
    width: 40%;
    font-size: 16px;
    text-align: center;
    margin-right: 20px;
    margin-left: 10px;
}



</style>